<template>
  <div id="knowCatalogManageDiv">
    <Splitpanes>
      <Pane size="25">
        <vxe-toolbar perfect>
          <template #buttons>
            <div class="smallToolTitle">
              目录</div>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="treeloading" @click="findKnowledgeCatalogList"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建根目录" @click="addRootCatalogDialog()"></vxe-button>
          </template>
        </vxe-toolbar>

        <el-scrollbar style="height: calc(100% - 40px)">
          <div class="sampleType">
            <el-tree :expand-on-click-node="false" :default-expand-all="true" :data="catalogList" node-key="id" ref="dataTreeRef" highlight-current class="tools-tree" @node-click="handleClickType" v-loading="treeloading">
              <template #default="{ data, node }">
                <span>{{ data.name }}</span>
                <div>
                  <span>
                    <!-- 新增  -->
                    <el-button type="success" class="cirBtn" size="small" icon="Plus" circle @click="appendCatalog(data)"></el-button>
                    <!-- 编辑  -->
                    <el-button type="warning" class="cirBtn" size="small" icon="Edit" circle @click="editCatalog(data, node)"></el-button>
                    <!-- 删除  -->
                    <el-button type="info" class="cirBtn" size="small" icon="Delete" circle @click="removeCatalog(data)"></el-button>
                  </span>
                </div>
              </template>
            </el-tree>
          </div>
        </el-scrollbar>

        <el-dialog :title="titleCatalog()" :show-close="false" v-model="showCatalogDialog" append-to-body :close-on-click-modal="false" width="500px">
          <el-form ref="catalogFormRef" :model="catalogForm" :rules="catalogFormRule" label-width="100px" class="form-input-m" inline-message>
            <el-form-item prop="pname" label="父级目录" v-if="pnameShow">
              <el-input type="text" v-model="catalogForm.pname" placeholder="请输入父类名称" disabled></el-input>
            </el-form-item>
            <el-form-item prop="code" label="编号">
              <el-input type="text" v-model="catalogForm.code" placeholder="请输入字典编号" clearable></el-input>
            </el-form-item>
            <el-form-item prop="name" label="名称">
              <el-input type="text" v-model="catalogForm.name" placeholder="请输入字典名称" clearable></el-input>
            </el-form-item>
            <el-form-item prop="status" label="状态">
              <el-select v-model="catalogForm.status" placeholder="请选择状态">
                <el-option v-for="status in statusTypes" :key="status.code" :label="status.name" :value="status.code"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="seq" label="排序" class="input-s">
              <el-input-number v-model="catalogForm.seq" :min="0" :max="100" label="请输入顺序号"></el-input-number>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer flex right justify-end">
            <el-button type="primary" @click="saveCatalog('catalogFormRef')">保存</el-button>
            <el-button @click="closeCatalogDialog('catalogFormRef')">取消</el-button>
          </div>
        </el-dialog>
      </Pane>

      <Pane size="75">

        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="内容" name="contentTab">
            <el-scrollbar style="height: 100%;">
              <div class="cardBox" v-loading="conloading" element-loading-text="富文本加载中，请耐心等待..." element-loading-spinner="el-icon-loading">
                <el-scrollbar>
                  <template v-for="(group, index) in contentList" :key="index">
                    <div class="item-interval">
                      <el-divider content-position="left" class="el-divider-title" :key="index">
                        【节点】{{ group.title + '（'}}{{ group.status===1?'已发布':'暂存' }}{{'）'}}
                        <el-button class="custBtn" type="primary" circle icon="el-icon-edit" @click="editContentDialog(group, index)"></el-button>
                        <el-button class="custBtn" type="warning" circle icon="el-icon-full-screen" @click="handleEditGroupContent(group, index)"></el-button>
                        <el-button class="custBtn" type="info" circle icon="el-icon-delete" @click="deleteContent(group, index)"></el-button>
                      </el-divider>

                      <CkEditor :ref="(el) => setCkEditorRef(el, group.id)" :folder-id="sltCatalog.id" :value="group.content" @editor-input="(val)=>group.content=val" />

                      <el-table row-key="index" :data="group.wkKnowledgeIssueList" height="378px">
                        <el-table-column label="序号" type="index" width="60" align="center" />
                        <el-table-column label="问题" prop="title" align="left">
                          <template #default="scope">
                            {{scope.row.title}}
                            <el-popover placement="right" width="400" trigger="hover">
                              <div v-html="scope.row.solution">
                              </div>
                              <el-button icon="el-icon-view" size="mini" type="text" style="margin-left:10px">查看解决方案</el-button>
                            </el-popover>
                          </template>
                        </el-table-column>

                        <el-table-column label="操作" width="120" align="center">
                          <template v-slot:header>
                            <el-button size="mini" icon="el-icon-plus" type="primary" plain @click="handleAddIssue(index,group.id)">新增</el-button>
                          </template>
                          <template #default="scope">
                            <el-button size="mini" icon="el-icon-edit" type="primary" plain circle @click="handleEditIssue(scope.row,index,scope.$index)"></el-button>
                            <el-button size="mini" icon="el-icon-delete" type="danger" plain circle @click="handleDeleteIssue(scope.row.id,scope.$index,group.wkKnowledgeIssueList)"></el-button>
                          </template>
                        </el-table-column>
                      </el-table>

                    </div>
                  </template>

                  <div class="save-footer">
                    <el-button type="warning" icon="el-icon-edit" size="medium" @click="batchUpdateContent" v-if="contentList.length > 0">暂存</el-button>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium" @click="addContentDialog">新增</el-button>
                    <el-button type="success" icon="el-icon-finished" size="medium" @click="batchUpdateSendContent" v-if="contentList.length > 0">发布</el-button>
                  </div>
                </el-scrollbar>

                <el-dialog :title="titleContent()" :show-close="false" v-model="showContentDialog" append-to-body :close-on-click-modal="false" width="500px">
                  <el-form ref="contentFormRef" :model="contentForm" :rules="contentFormRule" label-width="100px" class="form-input-m" inline-message>
                    <el-form-item prop="title" label="标题">
                      <el-input type="text" v-model="contentForm.title" placeholder="请输入标题" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="publishTime" label="发布时间">
                      <el-date-picker v-model="contentForm.publishTime" type="datetime" placeholder="请选择发布时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item prop="seq" label="排序" class="input-s">
                      <el-input-number v-model="contentForm.seq" :min="0" :max="100" label="请输入顺序号"></el-input-number>
                    </el-form-item>
                  </el-form>
                  <div class="dialog-footer flex right justify-end">
                    <el-button type="primary" @click="saveContent('contentFormRef')">保存</el-button>
                    <el-button @click="closeContentDialog('contentFormRef')">取消</el-button>
                  </div>
                </el-dialog>
              </div>
            </el-scrollbar>

            <el-dialog title="知识库问题" :show-close="false" v-model="showIssueDialog" :append-to-body="true" :close-on-click-modal="false">
              <el-form ref="issueFormRef" :model="issueForm" :rules="issueFormRule" label-width="80px" class="form-input-l" :inline-message="true">
                <el-form-item prop="title" label="问题标题">
                  <el-input type="text" v-model="issueForm.title" placeholder="请输入标题" clearable></el-input>
                </el-form-item>
                <el-form-item prop="solution" label="解决方案">
                  <CkEditor ref="refIssueEditor" :folderId="issueForm.catalogId" @editorInput="(val)=>issueForm.solution=val" />
                </el-form-item>
              </el-form>
              <div class="dialog-footer">
                <el-button type="primary" @click="confirmIssueForm('issueFormRef')">确定</el-button>
                <el-button @click="closeIssueDialog('issueFormRef')">取消</el-button>
              </div>
            </el-dialog>

          </el-tab-pane>
          <el-tab-pane label="附件" name="fileTab">222
          </el-tab-pane>

        </el-tabs>
      </Pane>
    </Splitpanes>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import CkEditor from '@/components/CkEditor.vue';
import { isEmpty } from 'lodash';
import { AppStore } from '@/stores/store';
// import func from 'vue-temp/vue-editor-bridge';
let store = AppStore();

defineExpose({ initPage });

let knowledgeId = null;
let treeloading = ref(false); //字典分类树上的刷新
let pnameShow = ref(false); //父级分类显示
let conloading = ref(false);
let showCatalogDialog = ref(false);
let showContentDialog = ref(false);
let showIssueDialog = ref(false);
let catalogList: any = reactive([]);
let contentList: any[] = reactive([]);
let activeName = ref('contentTab');

let sltCatalog: any = {};
let statusTypes = [
  {
    name: '启用',
    code: true
  },
  {
    name: '禁用',
    code: false
  }
];
let catalogForm = reactive({
  id: null,
  knowledgeId: null,
  pname: '',
  pid: null,
  orgId: '',
  code: '',
  name: '',
  seq: 1,
  status: true
});

let catalogFormRule = {
  name: [
    {
      required: true,
      message: '请输入字典名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ]
};

let contentForm = reactive({
  idx: null,
  id: null,
  knowledgeId: null,
  catalogId: null,
  orgId: '',
  title: '',
  content: '',
  seq: 1,
  status: 0,
  publishTime: ''
});

let contentFormRule = {
  title: [
    {
      required: true,
      message: '请输入字典名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ]
};

let issueForm = reactive({
  contentIdx: 0,
  issueIdx: 0,
  id: null,
  knowledgeId: null,
  catalogId: null,
  contentId: null,
  orgId: '',
  title: '',
  solution: '',
  seq: 1,
  status: 0,
  publishTime: ''
});

let issueFormRule = {
  title: [
    {
      required: true,
      message: '请输入字典名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ]
};

function initPage(row: any) {
  knowledgeId = row;
  findKnowledgeCatalogList();
}

// 光标定位在指定字典分类上
function setCurTypeNode(nodeId: any) {
  proxy.$nextTick(() => {
    const treeName = 'dataTreeRef';
    const tree: any = proxy.$refs[treeName];
    tree.setCurrentKey(nodeId);
  });
}

// 获取左侧仪器表格数据+刷新+右侧表格数据
function findKnowledgeCatalogList() {
  treeloading.value = true;
  catalogList.length = 0; //放入数据前清空数据
  if (isEmpty(knowledgeId)) {
    treeloading.value = false;
    return;
  }
  const url = '/api/wk/wkKnowledgeCatalog/getKnowledgeCatalogTree/' + knowledgeId;
  proxy.$http
    //注意此处的数据条数
    .get(url)
    .then((res: any) => {
      catalogList.push(...res.data);
      if (catalogList.length > 0) {
        const sltObj = getChildren(catalogList[0]);
        sltCatalog = sltObj;
        setCurTypeNode(sltObj.id);
        activeName.value = 'contentTab';
        getContentListByCatalogId();
      } else {
        sltCatalog = {};
      }
      treeloading.value = false;
    })
    .catch((err: any) => {
      treeloading.value = false;
      VxeMessage('获取数据异常', VxeNotifyType.error);
    });
}
function addRootCatalogDialog() {
  catalogForm.pid = 0;
  catalogForm.name = '';
  catalogForm.code = '';
  catalogForm.knowledgeId = knowledgeId;
  catalogForm.orgId = store.userInfo.orgId;
  pnameShow.value = false;
  if (catalogList.length > 0) {
    // 根分类的顺序号
    const seq = catalogList[catalogList.length - 1].seq + 1;
    catalogForm.seq = seq;
  }
  showCatalogDialog.value = true;
}
//点击左侧分类
function handleClickType(obj: any) {
  sltCatalog = obj;
  activeName.value = 'contentTab';
  getContentListByCatalogId();
}

function appendCatalog(row: any) {
  catalogForm.pname = row.name;
  catalogForm.pid = row.id;
  catalogForm.knowledgeId = knowledgeId;
  catalogForm.orgId = store.userInfo.orgId;
  catalogForm.name = '';
  catalogForm.code = '';
  if (row.children.length > 0) {
    const seq = row.children[row.children.length - 1].seq + 1;
    catalogForm.seq = seq;
  } else {
    catalogForm.seq = 1;
  }
  pnameShow.value = true;
  showCatalogDialog.value = true;
}

function editCatalog(item: any, node: any) {
  catalogForm.pid = item.pid;
  catalogForm.pname = node.parent.data.name;
  catalogForm.knowledgeId = item.knowledgeId;
  catalogForm.id = item.id;
  catalogForm.name = item.name;
  catalogForm.code = item.code;
  catalogForm.seq = item.seq;
  catalogForm.status = item.status;
  if (item.pid == 0) {
    pnameShow.value = false;
  } else {
    pnameShow.value = true;
  }
  showCatalogDialog.value = true;
}

function saveCatalog(formName: any) {
  const el: any = proxy.$refs[formName];
  el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    const obj = {
      id: catalogForm.id,
      knowledgeId: catalogForm.knowledgeId,
      pid: catalogForm.pid,
      name: catalogForm.name,
      code: catalogForm.code,
      seq: catalogForm.seq,
      status: catalogForm.status,
      orgId: !isEmpty(catalogForm.orgId) ? catalogForm.orgId : store.userInfo.orgId
    };
    let url = '';
    // 判断添加和编辑接口
    if (catalogForm.id) {
      url = '/api/wk/wkKnowledgeCatalog/editKnowledgeCatalog';
    } else {
      url = '/api/wk/wkKnowledgeCatalog/addKnowledgeCatalog';
    }
    proxy.$http
      .post(url, obj)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (catalogForm.id) {
            VxeMessage('修改成功', VxeNotifyType.success);
          } else {
            VxeMessage('新增成功', VxeNotifyType.success);
          }
          findKnowledgeCatalogList();
          showCatalogDialog.value = false;
          // 清空表单
          clearCatalogForm();
        } else {
          if (catalogForm.id) {
            VxeMessage('修改失败', VxeNotifyType.error);
          } else {
            VxeMessage('新增失败', VxeNotifyType.error);
          }
        }
      })
      .catch((err: any) => {
        VxeMessage('保存异常', VxeNotifyType.error);
      });
  });
}

// 删除字典分类小按钮
function removeCatalog(row: any) {
  proxy
    .$confirm('确定删除此目录？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      const url = '/api/wk/wkKnowledgeCatalog/deletKnowledgeCatalog';
      if (row.id) {
        if (row.children.length === 0) {
          proxy.$http
            .post(url, row)
            .then((res: any) => {
              if (res.status.code === 1) {
                VxeMessage('删除字成功', VxeNotifyType.success);
                findKnowledgeCatalogList();
              } else {
                VxeMessage('删除失败', VxeNotifyType.error);
              }
            })
            .catch((err: any) => {
              // VxeMessage('删除字典异常', VxeNotifyType.error);
            });
        } else {
          VxeMessage('该目录下存在子目录,不能删除', VxeNotifyType.error);
        }
      }
    });
}

function getContentListByCatalogId() {
  conloading.value = true;
  contentList.length = 0; //放入数据前清空数据
  if (isEmpty(sltCatalog)) {
    conloading.value = false;
    return;
  }
  const url = '/api/wk/wkKnowledgeContent/getContentListByCatalogId/' + sltCatalog.id;
  proxy.$http
    //注意此处的数据条数
    .get(url)
    .then((res: any) => {
      contentList.push(...res.data);
      conloading.value = false;
    })
    .catch((err: any) => {
      conloading.value = false;
      VxeMessage('获取数据异常', VxeNotifyType.error);
    });
}
function getChildren(obj: any) {
  const children = obj.children;
  if (children.length > 0) {
    return getChildren(children[0]);
  } else {
    return obj;
  }
}

function titleCatalog() {
  if (catalogForm.id) {
    return `编辑目录`;
  } else if (!catalogForm.id) {
    return `新建目录`;
  }
}
function titleContent() {
  if (contentForm.id) {
    return `编辑`;
  } else if (!contentForm.id) {
    return `新建`;
  }
}

function closeCatalogDialog(formName: any) {
  const el: any = proxy.$refs[formName];
  //移除校验结果
  el.clearValidate();
  clearCatalogForm();
  pnameShow.value = false;
  showCatalogDialog.value = false;
}

function clearCatalogForm() {
  catalogForm.id = null;
  catalogForm.knowledgeId = null;
  catalogForm.pid = null;
  catalogForm.pname = '';
  catalogForm.code = '';
  catalogForm.name = '';
  catalogForm.orgId = '';
  catalogForm.seq = 1;
  catalogForm.status = true;
}

function addContentDialog() {
  if (isEmpty(sltCatalog)) {
    VxeMessage('请选择目录', VxeNotifyType.error);
  } else {
    contentForm.knowledgeId = knowledgeId;
    contentForm.catalogId = sltCatalog.id;
    contentForm.orgId = store.userInfo.orgId;
    contentForm.title = '';
    contentForm.content = '';
    contentForm.status = 0;
    contentForm.publishTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
    if (contentList.length > 0) {
      // 根分类的顺序号
      const seq = contentList[contentList.length - 1].seq + 1;
      contentForm.seq = seq;
    }
    showContentDialog.value = true;
  }
}

function editContentDialog(item, index) {
  contentForm.idx = index;
  contentForm.id = item.id;
  contentForm.knowledgeId = item.knowledgeId;
  contentForm.catalogId = item.catalogId;
  contentForm.title = item.title;
  contentForm.content = item.content;
  contentForm.orgId = item.orgId;
  contentForm.publishTime = item.publishTime;
  contentForm.seq = item.seq;
  contentForm.status = 0;
  showContentDialog.value = true;
}

function closeContentDialog(formName: any) {
  const el: any = proxy.$refs[formName];
  //移除校验结果
  el.clearValidate();
  clearContentForm();
  showContentDialog.value = false;
}

function closeIssueDialog(formName: any) {
  const el: any = proxy.$refs[formName];
  //移除校验结果
  el.clearValidate();
  clearIssueForm();
  showIssueDialog.value = false;
}
function clearIssueForm() {
  issueForm.contentIdx = 0;
  issueForm.id = null;
  issueForm.knowledgeId = null;
  issueForm.catalogId = null;
  issueForm.contentId = null;
  issueForm.title = '';
  issueForm.solution = '';
  issueForm.orgId = '';
  issueForm.publishTime = '';
  issueForm.seq = 1;
  issueForm.status = 0;
}
function clearContentForm() {
  contentForm.idx = null;
  contentForm.id = null;
  contentForm.knowledgeId = null;
  contentForm.catalogId = null;
  contentForm.title = '';
  contentForm.content = '';
  contentForm.orgId = '';
  contentForm.publishTime = '';
  contentForm.seq = 1;
  contentForm.status = 0;
}

function saveContent(formName: any) {
  const el: any = proxy.$refs[formName];
  el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    const obj = {
      id: contentForm.id,
      knowledgeId: contentForm.knowledgeId,
      catalogId: contentForm.catalogId,
      title: contentForm.title,
      content: contentForm.content,
      seq: contentForm.seq,
      status: contentForm.status,
      publishTime: contentForm.publishTime,
      orgId: !isEmpty(contentForm.orgId) ? contentForm.orgId : store.userInfo.orgId
    };
    let url = '';
    // 判断添加和编辑接口
    if (contentForm.id) {
      url = '/api/wk/wkKnowledgeContent/editKnowledgeContent';
    } else {
      url = '/api/wk/wkKnowledgeContent/addKnowledgeContent';
    }
    proxy.$http
      .post(url, obj)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (contentForm.id) {
            contentList[contentForm.idx].knowledgeId = contentForm.knowledgeId;
            contentList[contentForm.idx].catalogId = contentForm.catalogId;
            contentList[contentForm.idx].title = contentForm.title;
            contentList[contentForm.idx].content = contentForm.content;
            contentList[contentForm.idx].orgId = contentForm.orgId;
            contentList[contentForm.idx].publishTime = contentForm.publishTime;
            contentList[contentForm.idx].seq = contentForm.seq;
            contentList[contentForm.idx].status = contentForm.status;
            contentList.sort((a, b) => a.order - b.order);
            VxeMessage('修改成功', VxeNotifyType.success);
          } else {
            const retObj = res.data;
            const contentTemp = {
              id: retObj.id,
              knowledgeId: retObj.knowledgeId,
              catalogId: retObj.catalogId,
              orgId: retObj.orgId,
              title: retObj.title,
              content: retObj.content,
              seq: retObj.seq,
              status: retObj.status,
              publishTime: retObj.publishTime,
              wkKnowledgeIssueList: []
            };
            // 新增分组后通过页面展示效果，不用再去请求接口
            contentList.push(contentTemp);
            contentList.sort((a, b) => a.order - b.order);

            VxeMessage('新增成功', VxeNotifyType.success);
          }
          showContentDialog.value = false;
          // 清空表单
          clearContentForm();
        } else {
          if (contentForm.id) {
            VxeMessage('修改失败', VxeNotifyType.error);
          } else {
            VxeMessage('新增失败', VxeNotifyType.error);
          }
        }
      })
      .catch((err: any) => {
        VxeMessage('保存异常', VxeNotifyType.error);
      });
  });
}

function deleteContent(row, idx) {
  proxy
    .$confirm('确定删除此内容？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      const url = '/api/wk/wkKnowledgeContent/deletKnowledgeContent';
      if (row.id) {
        proxy.$http
          .post(url, row)
          .then((res: any) => {
            if (res.status.code === 1) {
              VxeMessage('删除成功', VxeNotifyType.success);
              getContentListByCatalogId();
            } else {
              VxeMessage('删除失败', VxeNotifyType.error);
            }
          })
          .catch((err: any) => {
            // VxeMessage('删除字典异常', VxeNotifyType.error);
          });
      }
    });
}
const refEditContent: any = {};

function setCkEditorRef(el, groupId) {
  if (el) {
    refEditContent[groupId] = el;
  } else {
    //如果li移除时找到对应的下标移除
    // if (removeIndex.value > -1) {
    //   boxRefs.value.splice(removeIndex.value, 1);
    // }
  }
}

//批量保存知识库内容
function batchUpdateContent() {
  const url = '/api/wk/wkKnowledgeContent/batchUpdateKnowledgeContent';
  const obj = {
    wkKnowledgeContentList: contentList
  };
  proxy.$http
    .post(url, obj)
    .then((res: any) => {
      if (res.status.code === 1) {
        VxeMessage('保存成功', VxeNotifyType.success);
      } else {
        VxeMessage('保存失败', VxeNotifyType.error);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

function batchUpdateSendContent() {
  for (const item of contentList) {
    if (item.status === 0) {
      item.status = 1;
    }
  }
  const url = '/api/wk/wkKnowledgeContent/batchUpdateKnowledgeContent';
  const obj = {
    wkKnowledgeContentList: contentList
  };
  proxy.$http
    .post(url, obj)
    .then((res: any) => {
      if (res.status.code === 1) {
        VxeMessage('保存成功', VxeNotifyType.success);
      } else {
        VxeMessage('保存失败', VxeNotifyType.error);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

function handleAddIssue(idx, contentId) {
  issueForm.contentIdx = idx;
  issueForm.id = '';
  issueForm.knowledgeId = knowledgeId;
  issueForm.catalogId = sltCatalog.id;
  issueForm.contentId = contentId;
  issueForm.orgId = store.userInfo.orgId;
  issueForm.title = '';
  issueForm.solution = '';
  issueForm.seq = 1;
  issueForm.status = 0;
  issueForm.publishTime = '';
  showIssueDialog.value = true;
}

function confirmIssueForm(formName: any) {
  const el: any = proxy.$refs[formName];
  el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    const obj = {
      id: issueForm.id,
      knowledgeId: issueForm.knowledgeId,
      catalogId: issueForm.catalogId,
      contentId: issueForm.contentId,
      orgId: !isEmpty(issueForm.orgId) ? issueForm.orgId : store.userInfo.orgId,
      title: issueForm.title,
      solution: issueForm.solution,
      seq: issueForm.seq,
      status: issueForm.status,
      publishTime: issueForm.publishTime
    };
    let url = '';
    // 判断添加和编辑接口
    if (issueForm.id) {
      url = '/api/wk/wkKnowledgeIssue/editKnowledgeIssue';
    } else {
      url = '/api/wk/wkKnowledgeIssue/addKnowledgeIssue';
    }
    proxy.$http
      .post(url, obj)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (!issueForm.id && res.data.id) {
            issueForm.id = res.data.id;
            contentList[issueForm.contentIdx].wkKnowledgeIssueList.push(res.data);
          } else {
            contentList[issueForm.contentIdx].wkKnowledgeIssueList[issueForm.issueIdx].title = issueForm.title;
            contentList[issueForm.contentIdx].wkKnowledgeIssueList[issueForm.issueIdx].solution = issueForm.solution;
          }
          showIssueDialog.value = false;
          const temp: any = proxy.$refs['refIssueEditor'];
          temp.setValue('');
          // 清空表单
          clearIssueForm();
        } else {
          if (issueForm.id) {
            VxeMessage('修改失败', VxeNotifyType.error);
          } else {
            VxeMessage('新增失败', VxeNotifyType.error);
          }
        }
      })
      .catch((err: any) => {
        VxeMessage('保存异常', VxeNotifyType.error);
        console.log(err);
      });
  });
}

async function handleEditIssue(issue, idx, iIdx) {
  issueForm.id = issue.id;
  issueForm.title = issue.title;
  issueForm.knowledgeId = issue.knowledgeId;
  issueForm.catalogId = issue.catalogId;
  issueForm.contentId = issue.contentId;
  issueForm.solution = issue.solution;
  issueForm.contentIdx = idx;
  issueForm.issueIdx = iIdx;
  showIssueDialog.value = true;
  proxy.$nextTick(() => {
    const temp: any = proxy.$refs['refIssueEditor'];
    if (issueForm.solution) {
      temp.setValue(issueForm.solution);
    }
  });
}
</script>

<style lang="scss" scoped>
#knowCatalogManageDiv {
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  // 最左侧字典分类的树
  .sampleType {
    .tools-tree {
      min-width: 168px;
      padding: 0 5px 5px 5px;
      font-size: $font-size;
      border: none;
      .cirBtn {
        display: none;
        width: 16px;
        height: 16px;
        padding: 0px;
        margin-left: 10px;
      }
      .el-tree-node__content:hover {
        .cirBtn {
          display: inline-block !important;
        }
      }
    }
  }

  .el-tabs {
    height: 100%;
    :deep(.el-scrollbar__view) {
      height: 100%;
      .cardBox {
        height: 100%;
        .item-interval {
          padding: 0 10px 0 0;
        }
      }
    }
  }

  //右侧质控项目表格
  .tableBox {
    height: calc(100% - 40px);
    background-color: $base-white;
  }

  .save-footer {
    position: fixed;
    right: 25px;
    bottom: 20px;
  }
}
</style>
